$body-bg: #316ba1;
$primaryColor: #1890ff;
$light-border: 1px solid #d9d9d9;

.box{
  width: 100%;
  height: 650px;
  background: #fff;
}

.xflow-user-container{
  background: #316ba1;
  height: 650px;
  width: 100%;
}


.custom-toolbar{
  background: #316ba1;
}
.toolbar-custom-render {
  position: relative;
  border: $light-border;
  .__dumi-default-previewer-demo {
    padding: 16px 12px;
  }

  .xflow-workspace {
    height: 300px;
    box-shadow: 0 0 10px 1px #e9e9e9;
  }

  .xflow-x6-canvas {
    background: $body-bg;
  }

  .xflow-canvas-root {
    margin: 0;
  }

  .custom-toolbar {
    width: 100%;
    line-height: 40px;
    text-align: center;
  }

  .react-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #873bf4;
    border-radius: 4px;
    &:hover {
      background-color: rgb(234, 219, 255) !important;
    }
  }
  .x6-node-selected {
    .react-node {
      background-color: rgb(254, 254, 255);
      border: 3px solid rgb(135, 59, 244);
      box-shadow: 0 0 3px 3px rgba(135, 59, 244, 0.2);
      &:hover {
        background-color: rgba(227, 244, 255, 0.45);
      }
    }
  }
}

.canvas-toolbar-basic {
  position: relative;
  border: $light-border;
  .__dumi-default-previewer-demo {
    padding: 16px 12px;
  }

  .xflow-workspace {
    min-height: 290px;
    box-shadow: 0 0 10px 1px #e9e9e9;
  }

  .xflow-x6-canvas {
    background: $body-bg;
  }

  .xflow-canvas-root {
    margin: 0;
  }

  .react-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #873bf4;
    border-radius: 4px;
    &:hover {
      background-color: rgb(234, 219, 255) !important;
    }
  }
  .x6-node-selected {
    .react-node {
      background-color: rgb(254, 254, 255);
      border: 3px solid rgb(135, 59, 244);
      box-shadow: 0 0 3px 3px rgba(135, 59, 244, 0.2);
      &:hover {
        background-color: rgba(227, 244, 255, 0.45);
      }
    }
  }
}

.dnd-node-demo {
  position: relative;
  border: $light-border;
  .__dumi-default-previewer-demo {
    padding: 16px 12px;
  }

  .xflow-workspace {
    height: 500px;
    box-shadow: 0 0 10px 1px #e9e9e9;
  }

  .dnd-panel-header {
    color: #525252;
  }

  .xflow-x6-canvas {
    background: $body-bg;
  }

  .xflow-canvas-root {
    margin: 0;
  }

  .react-dnd-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 32px;
    padding: 0 16px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #fff;
    border: 1px solid #a2b1c3;
    border-radius: 4px;
    // &:hover {
    //   background: ~'linear-gradient(270deg,#f8faff,rgba(248,250,255,0)) !important';
    // }
  }
  .x6-node-selected {
    .react-dnd-node {
      background-color: rgb(254, 254, 255);
      border: 3px solid #a2b1c3;
      box-shadow: 0 0 3px 3px rgba(135, 59, 244, 0.2);
      &:hover {
        background-color: #b3babd2c;
      }
    }
  }
}
.x6-widget-dnd {
  .react-dnd-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #fff;
    border: 1px solid #a2b1c3;
    border-radius: 4px;
    &:hover {
      background-color: #b3babd2c !important;
    }
  }
}